<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="详情" width="80%">
    <div class="content">
      <el-tabs v-model="activeName" stretch @tab-click="handleClick">
        <el-tab-pane label="产品基本信息" name="first" class="btnFatcher">
          <el-card class="box-card">
            <el-row>
              <el-col :span="12">
                <div class="watch">
                  产品名称: {{ name }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="watch">
                  产品创建日期: {{ createTime }}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <div class="watch">
                  产品类别: {{ type }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="watch">
                  最后审核日期: {{ reviewDate }}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="watch">
                  排序号: {{ sequence }}
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card1">
            <el-row v-for="(item, index) in platformList" :key="index">
              <el-col :span="12">
                <div class="watch">
                  产品所属平台: {{ item.platformName }}
                </div>
              </el-col>
              <!-- <el-col :span="12">
                <div class="watch">
                  运营商产品标识： {{ item.cpproductId }}
                </div>
              </el-col> -->
            </el-row>
          </el-card>

          <el-card class="box-card1">
            <el-row>
              <el-col :span="24">
                <div class="watch">
                  产品所属cp:
                  <div v-for="(item, index) in cpList" :key="index" class="productCP">
                    <el-tag type="info">
                      {{ item.cpName }}
                    </el-tag>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="watch">
                  产品描述：{{ description }}
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card1">
            <el-row>
              <el-col :span="24" class="imgArr">
                <div class="productImgWord">产品描述图片：</div>
                <div v-for="(item, index) in imageList" :key="index" class="imgList">
                  <img class="imgItem" :src="item.imageUrl">
                </div>
              </el-col>
              <el-row>
                <el-col :span="24">
                  <div style="display: inline-block;margin-right:32px;">图片标识：</div>
                  <div v-for="(item, index) in imageList" :key="index" class="imgWord">
                    <span>{{ item.imageLogo }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-row>
          </el-card>

          <el-card class="box-card2">
            <el-row v-for="(item, index) in linkList" :key="index">
              <el-col :span="12">
                <div class="watch">
                  产品链接: {{ item.productLink }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="watch">
                  链接标识: {{ item.linkIdentifier }}
                </div>
              </el-col>
            </el-row>
          </el-card>
          <div class="btnArrs">
            <el-button
              type="primary"
              size="small"
              plain
              @click="check()"
            >取消</el-button>
            <el-button
              type="primary"
              size="small"
              @click="next('second')"
            >下一步</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="产品资费策略" name="second" class="btnFatcher">
          <span class="tariffList">已关联资费策略</span>
          <div class="app-table">
            <el-table :data="tariffList" border style="width: 100%">
              <el-table-column label="策略编号">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.tariffId" :content="scope.row.tariffId" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.tariffId }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="资费策略名称">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="价格">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.price" :content="scope.row.price" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.price }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="计费周期">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.cycle" :content="scope.row.cycle" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.cycle }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="计费方式">
                <template slot-scope="scope">
                  {{ scope.row.realPay }}
                </template>
              </el-table-column>
              <el-table-column label="是否自动续订">
                <template slot-scope="scope">
                  {{ scope.row.isGoon === '0' ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column label="退订锁定期">
                <template slot-scope="scope">
                  {{ scope.row.lockPeriod }}
                </template>
              </el-table-column>
              <el-table-column label="计费渠道">
                <template slot-scope="scope">
                  {{ scope.row.billingChannelName }}
                </template>
              </el-table-column>
              <el-table-column label="资费策略排序">
                <template slot-scope="scope">
                  {{ scope.row.sequence }}
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="pagination-container">
              <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div> -->
            <div class="btnArrs">
              <el-button
                type="primary"
                size="small"
                plain
                @click="next('first')"
              >上一步</el-button>
              <el-button
                type="primary"
                size="small"
                @click="next('third')"
              >下一步</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="产品服务" name="third">
          <span class="tariffList">已关联产品服务</span>
          <div class="app-table">
            <el-table :data="serviceList" border style="width: 100%">
              <el-table-column label="服务ID">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.serviceId" :content="scope.row.serviceId" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.serviceId }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="服务名称">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <!-- <el-table-column label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === '0'">
                    未提交
                  </span>
                  <span v-if="scope.row.status === '1'">
                    已提交
                  </span>
                  <span v-if="scope.row.status === '2'">
                    废弃
                  </span>
                </template>
              </el-table-column> -->
              <el-table-column label="服务来源">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.serviceSourceName" :content="scope.row.serviceSourceName" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.serviceSourceName }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="节目来源">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.serviceSourceType" :content="scope.row.serviceSourceType" placement="top" trigger="hover">
                    <span slot="reference" style="cursor:pointer">{{ scope.row.serviceSourceType }}</span>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="pagination-container">
              <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div> -->
            <div class="btnArrs1">
              <el-button
                type="primary"
                size="small"
                plain
                @click="next('second')"
              >上一步</el-button>
              <el-button
                type="primary"
                size="small"
                @click="next('fourth')"
              >下一步</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="产品优惠" name="fourth">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="bold">基本信息</span>
            </div>
            <el-row>
              <el-col :span="24">
                <div class="watch">
                  策略名称：{{ preferentialTariffBean.name }}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="watch">
                  策略开始时间：{{ preferentialTariffBean.beginTime }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="watch">
                  策略结束时间：{{ preferentialTariffBean.endTime }}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="watch">
                  策略描述：{{ preferentialTariffBean.description }}
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="bold">策略触发条件</span>
            </div>
            <el-row>
              <el-col :span="24">
                <div class="watch">
                  触发条件：{{ preferentialTariffBean.triggeringConditionsName }}
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card mar">
            <div slot="header" class="clearfix">
              <span class="bold">策略优惠形式</span>
            </div>
            <el-row>
              <el-col :span="24">
                <div class="watch">
                  优惠形式：{{ preferentialTariffBean.preferentialTypeName }}
                </div>
              </el-col>
              <el-col v-if="preferentialTariffBean.preferentialType == 1" :span="24">
                <div class="watch">
                  折扣比例：{{ preferentialTariffBean.discountRatio }} %
                </div>
              </el-col>
              <el-col v-if="preferentialTariffBean.preferentialType == 0" :span="24">
                <div class="watch">
                  折价金额：{{ preferentialTariffBean.discountAmount }} 元
                </div>
              </el-col>
            </el-row>
          </el-card>
          <div class="btnArrs2">
            <el-button
              type="primary"
              size="small"
              plain
              @click="next('third')"
            >上一步</el-button>
            <el-button
              type="primary"
              size="small"
              @click="check"
            >完成</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import { watchInfo } from '@/api/productCheck.js'
import { getSelectS, getUpVersionDetail } from '@/api/product.js'
export default {
  name: 'Watch',
  props: {
    detailDialog: {
      type: Boolean,
      default: false
    },
    productNo: {
      type: String,
      default: ''
    },
    // id
    keyId: {
      type: String,
      default: ''
    },
    // 产品id
    proId: {
      type: String,
      default: ''
    },
    statusDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      id: '', // id
      createTime: '', // 创建时间
      reviewDate: '', // 审核日期
      productId: '', // 产品id
      activeName: 'first',
      name: '', // 产品名称
      sequence: '', // 排序号
      type: '', // 产品类别
      payStyles: [],
      description: '', // 描述
      platformList: [{
        platformName: '',
        cpproductId: ''
      }], // 所属平台数组
      cpList: [], // 产品所属cp关系
      productNos: '',
      imageList: [], // 产品图片关系
      linkList: [{
        productLink: '',
        linkIdentifier: ''
      }], // 产品链接关系
      productCategoryArr: [], // 产品类别
      tariffList: [], // 产品资费策略
      serviceList: [], // 产品服务list
      cpproductId: '',
      serviceTypeArr: [],
      statusDetailA: false,
      sourceArr: [],
      triggeringConditionsArr: [],
      preferentialTypeArr: [],
      preferentialTariffBean: {} // 优惠资费

    }
  },
  computed: {
    /* cateName() {
      if (this.productCategoryArr.length > 0) {
        this.productCategoryArr.map(item => {
          if (item.typeId === this.type) {
            return item.typeName
          }
        })
      }
    } */
  },
  watch: {
    detailDialog(newVal) {
      this.showPointDialog = newVal
      this.id = this.keyId
      this.productId = this.proId
      this.productNos = this.productNo
      if (newVal) {
        this.statusDetailA = this.statusDetail
        // this.loadSelect()
        // this.getSelectAll()
        this.loadInfo(this.id, this.productId)
      }
    }
  },
  methods: {
    // 请求支付渠道下拉
    // 得到信息
    loadSelect() {
      // 策略触发条件
      var data = {
        functionType: 'triggeringConditions'
      }
      getSelectS(data).then(res => {
        this.triggeringConditionsArr = res.data.list
      })
      // 优惠方式
      var cp = {
        functionType: 'preferentialType'
      }
      getSelectS(cp).then(res => {
        this.preferentialTypeArr = res.data.list
      })
      // 产品类别
      var typess = {
        functionType: 'productCategory'
      }
      getSelectS(typess).then(res => {
        this.productCategoryArr = res.data.list
      })
    },
    // 下一页
    next(val) {
      this.activeName = val
    },
    // 得到信息
    loadInfo() {
      // 策略触发条件
      // 节目来源
      var data333 = {
        functionType: 'programSource'
      }
      getSelectS(data333).then(res => {
        this.serviceTypeArr = res.data.list
        // 服务来源
        var data12 = {
          functionType: 'serviceSource'
        }
        getSelectS(data12).then(res => {
          this.sourceArr = res.data.list
          var data11 = {
            functionType: 'triggeringConditions'
          }
          getSelectS(data11).then(res => {
            this.triggeringConditionsArr = res.data.list
            // 优惠方式
            var cp2 = {
              functionType: 'preferentialType'
            }
            getSelectS({ functionType: 'billingMode' }).then(res => {
              console.log(res)
              this.payStyles = res.data.list
              getSelectS(cp2).then(res => {
                this.preferentialTypeArr = res.data.list
                // 产品类别
                var typess = {
                  functionType: 'productCategory'
                }
                getSelectS(typess).then(res => {
                  this.productCategoryArr = res.data.list
                  var data = {
                    id: this.id,
                    productId: this.productId
                  }
                  // 上线版本
                  console.log(this.statusDetailA)
                  if (this.statusDetailA) {
                    data.productNo = this.productNos
                    getUpVersionDetail(data).then(res => {
                      const data2 = res.data
                      console.log(data2.name)
                      this.name = data2.name // 产品名称
                      this.sequence = data2.sequence
                      this.type = data2.productCategory // 产品类别
                      this.productCategoryArr.forEach(item => {
                        if (item.typeId === data2.productCategory) {
                          this.type = item.typeName
                        }
                      })
                      this.description = data2.description // 描述
                      this.createTime = data2.createTime // 创建日期
                      this.reviewDate = data2.reviewDate // 审核日期
                      if (data2.platformList.length > 0) {
                        this.platformList = data2.platformList // 所属平台数组
                      }
                      if (data2.cpList.length > 0) {
                        this.cpList = data2.cpList // 产品所属cp关系
                      }
                      if (data2.imageList.length > 0) {
                        this.imageList = data2.imageList // 产品图片关系
                      }
                      if (data2.imageList.length === 0) {
                        this.imageList = []
                      }
                      if (data2.linkList.length > 0) {
                        this.linkList = data2.linkList // 产品链接关系
                      }
                      if (data2.tariffList.length > 0) {
                        this.tariffList = data2.tariffList // 产品资费策略
                        this.payStyles.forEach(item => {
                          this.tariffList.forEach(num => {
                            console.log(num)
                            console.log(item)
                            if (num.mode === item.typeId) {
                              num.realPay = item.typeName
                            }
                          })
                        })
                      }
                      if (data2.serviceList.length > 0) {
                        this.serviceList = data2.serviceList // 产品服务list
                        this.serviceList.forEach(item => {
                          this.sourceArr.forEach(num => {
                            // 服务来源
                            if (num.typeId === item.source) {
                              item.serviceSourceName = num.typeName
                            }
                          })
                        })
                        this.serviceList.forEach(item => {
                          this.serviceTypeArr.forEach(num => {
                            // 节目来源
                            if (num.typeId === item.source) {
                              item.serviceSourceType = num.typeName
                            }
                          })
                        })
                      }
                      if (data2.preferentialTariffBean) { // triggeringConditionsArr
                        this.preferentialTariffBean = data2.preferentialTariffBean
                        this.triggeringConditionsArr.forEach(item => {
                          if (item.typeId === this.preferentialTariffBean.triggeringConditions) {
                            this.preferentialTariffBean.triggeringConditionsName = item.typeName
                          }
                        })
                        this.preferentialTypeArr.forEach(item => {
                          if (item.typeId === this.preferentialTariffBean.preferentialType) {
                            this.preferentialTariffBean.preferentialTypeName = item.typeName
                          }
                        })
                      }
                      if (!data2.preferentialTariffBean) {
                        this.preferentialTariffBean = {}
                      }
                      // this.cpproductId = data2.cpproductId // 运营商标识
                    })
                  } else {
                    watchInfo(data).then(res => {
                      const data2 = res.data
                      console.log(data2.name)
                      this.name = data2.name // 产品名称
                      this.sequence = data2.sequence
                      this.type = data2.productCategory // 产品类别
                      this.productCategoryArr.forEach(item => {
                        if (item.typeId === data2.productCategory) {
                          this.type = item.typeName
                        }
                      })
                      this.description = data2.description // 描述
                      this.createTime = data2.createTime // 创建日期
                      this.reviewDate = data2.reviewDate // 审核日期
                      if (data2.platformList.length > 0) {
                        this.platformList = data2.platformList // 所属平台数组
                      }
                      if (data2.cpList.length > 0) {
                        this.cpList = data2.cpList // 产品所属cp关系
                      }
                      if (data2.imageList.length > 0) {
                        this.imageList = data2.imageList // 产品图片关系
                      }
                      if (data2.imageList.length === 0) {
                        this.imageList = []
                      }
                      if (data2.linkList.length > 0) {
                        this.linkList = data2.linkList // 产品链接关系
                      }
                      if (data2.tariffList.length > 0) {
                        this.tariffList = data2.tariffList // 产品资费策略
                        this.payStyles.forEach(item => {
                          this.tariffList.forEach(num => {
                            if (num.mode === item.typeId) {
                              num.realPay = item.typeName
                            }
                          })
                        })
                      }
                      if (data2.serviceList.length > 0) {
                        this.serviceList = data2.serviceList // 产品服务list
                        this.serviceList.forEach(item => {
                          this.sourceArr.forEach(num => {
                            // 服务来源
                            if (num.typeId === item.source) {
                              item.serviceSourceName = num.typeName
                            }
                          })
                        })
                        this.serviceList.forEach(item => {
                          this.serviceTypeArr.forEach(num => {
                            // 节目来源
                            if (num.typeId === item.source) {
                              item.serviceSourceType = num.typeName
                            }
                          })
                        })
                      }
                      if (data2.preferentialTariffBean) { // triggeringConditionsArr
                        this.preferentialTariffBean = data2.preferentialTariffBean
                        this.triggeringConditionsArr.forEach(item => {
                          if (item.typeId === this.preferentialTariffBean.triggeringConditions) {
                            this.preferentialTariffBean.triggeringConditionsName = item.typeName
                          }
                        })
                        this.preferentialTypeArr.forEach(item => {
                          if (item.typeId === this.preferentialTariffBean.preferentialType) {
                            this.preferentialTariffBean.preferentialTypeName = item.typeName
                          }
                        })
                      }
                      // this.cpproductId = data2.cpproductId // 运营商标识
                    })
                  }
                })
              })
            })
          })
        })
      })
    },
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.$emit('closeWatch')
      setTimeout(() => {
        this.activeName = 'first'
      }, 1000)
    },
    handleClick() {
      console.log(2)
    }
  }
}
</script>

<style scoped>
.content{
  width: 95%;
}
.imgList{
  display: flex;
  width: 150px !important;
  height: 150px;
  margin: 0 3px 0 4px;
  flex-direction: column;
}
.imgItem{
  width: 150px;
  height: 150px;
  margin: 0 5px;
}
</style>
<style>
.el-dialog__body{
  padding: 20px;
}
.app-table{
  margin-bottom: 50px;
}
#tab-first::after{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-first::before{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
#tab-second::after{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-second::before{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
#tab-third::after{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-third::before{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
.watch{
  margin: 10px 0;
}
.box-card{
  margin-top: 10px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
  margin-bottom: 45px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
.productCP{
  display: inline-block;
  margin: 0 5px;
}
.el-card__body{
  padding: 10px 20px;
}
.imgArr{
  display: flex;
  justify-content: flex-start;
}
.productImgWord{
  margin-top: 40px;
  height: 49px;
  vertical-align: middle;
  display: inline-block;
}
.imgWord{
  width: 150px;
  text-align: center;
  margin: 5px 4px 0 4px;
  display: inline-block;
}
.btnFatcher{
  position: relative;
}
.btnArrs{
  display: flex;
  justify-content: flex-end;
  width: 200px;
  position: absolute;
  right: 0;
  bottom: -45px;
}
.btnArrs1{
  display: flex;
  justify-content: flex-end;
  width: 200px;
  position: absolute;
  right: 0;
  bottom: 6px;
}
.btnArrs2{
  display: flex;
  justify-content: flex-end;
  width: 200px;
  position: absolute;
  right: 0;
  bottom: 2px;
}
.mar{
  margin-bottom: 55px;
}
.tariffList{
  margin: 5px 0 19px 0;
  font-weight: bold;
}
.bold{
  font-weight: bold;
}
</style>
